<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>培训管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 查询、新建、报名列表切换 -->
    <el-row>
      <el-button type="primary" plain @click="show(1)">查询培训信息</el-button>
      <el-button type="success" plain @click="show(2)">新建培训计划</el-button>
      <el-button type="warning" plain @click="show(3), show3()">查询员工报名情况</el-button>
    </el-row>
    <br />
    <!-- 查询培训信息 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" v-show="isShow1">
      <el-form-item label="报名状态：">
        <el-select v-model="formInline.baoming" placeholder="查询全部">
          <el-option label="查询全部" value="0"></el-option>
          <el-option label="已开始" value="1"></el-option>
          <el-option label="已结束" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlequery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="trainData" style="width: 100%" border v-show="isShow1">
      <el-table-column prop="PXName" label="培训名称"> </el-table-column>
      <el-table-column prop="PXContent" label="培训内容"> </el-table-column>
      <el-table-column prop="PXBegTime" label="培训开始时间">
        <template slot-scope="scope">
          {{ scope.row.PXBegTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="PXEndTime" label="培训结束时间">
        <template slot-scope="scope">
          {{ scope.row.PXEndTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="PXAddress" label="培训地点"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handledel(scope.row.PXId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新建培训计划 -->
    <el-form ref="form" :model="form" label-width="120px" v-show="isShow2"
      style="width: 700px; position: relative; left: 285px">
      <el-form-item label="培训名称：">
        <el-input v-model="form.pxname"></el-input>
      </el-form-item>
      <el-form-item label="培训开始时间：">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="培训结束时间：">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="培训内容：">
        <el-input type="textarea" v-model="form.pxcontent"></el-input>
      </el-form-item>
      <el-form-item label="培训地点：">
        <el-input v-model="form.pxaddress"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addok">确定</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询员工报名情况 -->
    <el-form :inline="true" :model="formInline3" class="demo-form-inline" v-show="isShow3">
      <el-form-item label="员工姓名：">
        <el-input v-model="formInline3.xingming" placeholder="请输入员工姓名"></el-input>
      </el-form-item>
      <el-form-item label="培训名称：">
        <el-input v-model="formInline3.pxname" placeholder="请输入培训名称"></el-input>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="formInline3.zhuangtai" placeholder="请选择状态：">
          <el-option label="未审批" value="0"></el-option>
          <el-option label="同意" value="1"></el-option>
          <el-option label="驳回" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlequery3">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="baomingData" style="width: 100%" v-show="isShow3" border>
      <el-table-column prop="UserName" label="员工姓名"> </el-table-column>
      <el-table-column prop="PXName" label="培训名称"> </el-table-column>
      <el-table-column prop="SqReason" label="报名原因"> </el-table-column>
      <el-table-column prop="SqStatus" label="审核状态"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" :disabled="scope.row.SqStatus!=flag" @click="handleff(scope.row, scope.row.PXId)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 审批弹窗 -->
    <el-dialog title="审核状态：" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="审核状态：" :label-width="formLabelWidth">
          <el-select v-model="xiugaiTable.zhuangtai" placeholder="请选择审核状态">
            <el-option label="同意" value="同意"></el-option>
            <el-option label="驳回" value="驳回"></el-option>
            <el-option label="未审批" value="未审批"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核原因：" :label-width="formLabelWidth">
          <el-input type="textarea" autocomplete="off" v-model="xiugaiTable.yuanyin"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="(dialogFormVisible = false), xiugaienter()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import Qs from "../../node_modules/qs";
export default {
  name: "train",
  filters: {
    filterTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  data() {
    return {
      isShow1: true, // 查询显示
      isShow2: false, // 新建隐藏
      isShow3: false, // 报名隐藏
      flag:'未审批',//审核节流阀
      // 查询培训信息
      formInline: {
        baoming: "", // 报名状态
      },
      // 新建培训计划
      form: {
        pxname: "", // 培训名称
        date1: "", // 培训开始时间
        date2: "", // 培训结束时间
        pxcontent: "", // 培训内容
        pxaddress: "", // 培训地点
      },
      // 查询报名列表
      formInline3: {
        xingming: "", // 员工姓名
        pxname: "", // 培训名称
        zhuangtai: "", // 状态
      },
      trainData: [], // 培训列表
      baomingData: [], // 报名列表
      xiugaiTable: [], // 审核弹窗
      dialogFormVisible: false, // 默认隐藏修改弹窗
      formLabelWidth: "90px", // 修改弹窗输入框宽度
      // 审核弹窗数据
      form: {
        zhuangtai: "", // 审核状态
        yuanyin: "", // 审核原因
      },
      bid: "",
    };
  },
  methods: {
    // 信息、添加列表切换
    show(e) {
      if (e == 1) {
        this.isShow1 = true;
        this.isShow2 = false;
        this.isShow3 = false;
        this.reshow();
      } else if (e == 2) {
        this.isShow1 = false;
        this.isShow2 = true;
        this.isShow3 = false;
      } else {
        this.isShow1 = false;
        this.isShow2 = false;
        this.isShow3 = true;
      }
    },
    // 刷新
    reshow() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/alltrain",
      }).then(function (res) {
        that.trainData = res.data.data;
      });
    },
    // 清空
    empty() {
      this.form.pxname = "";
      this.form.date1 = "";
      this.form.date2 = "";
      this.form.pxcontent = "";
      this.form.pxaddress = "";
    },
    // 培训信息查询
    handlequery() {
      let that = this;
      let params = {
        name: this.formInline.baoming,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchtrain1",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        data: Qs.stringify(params),
      }).then(function (res) {
        that.trainData = res.data.data;
      });
    },
    // 新增培训计划
    addok() {
      let that = this;
      let starttime = new Date(this.form.date1).toLocaleDateString();
      let endtime = new Date(this.form.date2).toLocaleDateString();
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/addtrain2",
        data: {
          tobj: {
            pxmz: this.form.pxname, // 培训名称
            pxbegtime: starttime, // 培训开始时间
            pxendtime: endtime, // 培训结束时间
            pxnr: this.form.pxcontent, // 培训内容
            pxdz: this.form.pxaddress, // 培训地址
            pxstatus: "已开始",
          },
        },
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("添加成功");
          that.empty();
          that.isShow1 = true;
          that.isShow2 = false;
          that.isShow3 = false;
          that.reshow();
        } else {
          alert("添加失败");
          that.empty();
        }
      });
    },
    // 查询报名列表
    handlequery3() {
      let that = this;
      let params = {
        name: this.formInline3.xingming,
        pxmc: this.formInline3.pxname,
        pxstatus: this.formInline3.zhuangtai,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchtrain",
        data: Qs.stringify(params),
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      }).then(function (res) {
        that.baomingData = res.data.data;
      });
    },
    // 删除培训信息
    handledel(id) {
      let that = this;
      axios({
        method: "get",
        url: `http://127.0.0.1:9090/deltrain?id=${id}`,
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("删除成功");
          that.reshow();
        } else {
          alert("删除失败");
        }
        that.reshow();
      });
    },
    // 查看员工报名情况
    show3() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/alltrain2",
      }).then(function (res) {
        that.baomingData = res.data.data;
      });
    },
    // 员工报名审核
    handleff(val, idd) {
      this.dialogFormVisible = true;
      this.bid = idd;
      this.$set(this.xiugaiTable, "zhuangtai", val.SqStatus.toString());
      this.$set(this.xiugaiTable, "yuanyin", val.SqReason.toString());
    },
    xiugaienter() {
      let that = this;
      let params = {
        SqStatus: this.xiugaiTable.zhuangtai,
        SqReason: this.xiugaiTable.yuanyin,
        PXId: this.bid,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/shtrain",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        data: Qs.stringify(params),
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("修改成功");
        } else {
          alert("修改失败");
        }
        that.dialogFormVisible = false;
        that.show3();
      });
    },
  },
  created() {
    this.reshow();
  },
};
</script>

<style scoped>
/* 列表切换、模糊查询左对齐 */
.el-row,
.el-form {
  text-align: left;
}

.el-form-item__label {
  text-align: left !important;
}
</style>